<template>
  <a-layout-sider class="sider" width="273">
    <setting-item title="整体风格设置">
      <a-tooltip>
        <template slot="title">
          暗色菜单风格
        </template>
        <div class="img-check-box" @click="updateTheme('dark')">
          <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
          <div v-if="theme === 'dark'" class="check-item">
            <a-icon type="check" />
          </div>
        </div>
      </a-tooltip>

      <a-tooltip>
        <template slot="title">
          亮色菜单风格
        </template>
        <div class="img-check-box" @click="updateTheme('light')">
          <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
          <div v-if="theme === 'light'" class="check-item">
            <a-icon type="check" />
          </div>
        </div>
      </a-tooltip>
    </setting-item>
    <setting-item title="主题色">
      <div :style="{ marginBottom: '24px' }">
        <h3 class="setting-drawer-index-title">主题色</h3>

        <div style="height: 20px">
          <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
            <template slot="title">
              {{ item.key }}
            </template>
            <a-tag :color="item.color" @click="changeColor(item.color)">
              
              <!-- <a-icon type="check" v-if="item.color === primaryColor"></a-icon> -->
            </a-tag>
          </a-tooltip>
        </div>
      </div>
      <!-- <color-checkbox-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
        <color-checkbox ref="colorNode" color="rgb(245, 34, 45)" value="1" />
        <color-checkbox color="rgb(250, 84, 28)" value="2" />
        <color-checkbox color="rgb(250, 173, 20)" value="3" />
        <color-checkbox color="rgb(19, 194, 194)" value="4" />
        <color-checkbox color="rgb(82, 196, 26)" value="5" />
        <color-checkbox color="rgb(24, 144, 255)" value="6" />
        <color-checkbox color="rgb(47, 84, 235)" value="7" />
        <color-checkbox color="rgb(114, 46, 209)" value="8" />
      </color-checkbox-group> -->
    </setting-item>
    <a-divider/>
    <!-- <setting-item title="导航设置">
      <a-tooltip>
        <template slot="title">
          侧边栏导航
        </template>
        <div class="img-check-box" @click="updateLayout('side')">
          <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="side">
          <div class="check-item" v-if="layout === 'side'">
            <a-icon type="check"/>
          </div>
        </div>
      </a-tooltip>

      <a-tooltip>
        <template slot="title">
          顶部栏导航
        </template>
        <div class="img-check-box" @click="updateLayout('head')">
          <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="head">
          <div class="check-item" v-if="layout === 'head'">
            <a-icon type="check"/>
          </div>
        </div>
      </a-tooltip>
    </setting-item> -->
    <setting-item>
      <a-list :split="false">
        <!-- <a-list-item>
          栅格模式
          <a-select size="small" defaultValue="1" slot="actions" style="width: 80px">
            <a-select-option value="1">流式</a-select-option>
            <a-select-option value="2">定宽</a-select-option>
          </a-select>
        </a-list-item> -->
        <a-list-item>
          固定Header
          <a-switch :checked="fixedHeader" slot="actions" size="small" @change="updateFixedHeader" />
        </a-list-item>
        <!-- <a-list-item>
          固定Siderbar
          <a-switch slot="actions" size="small" />
        </a-list-item> -->
      </a-list>
    </setting-item>
    <a-divider />
    <setting-item title="其他设置">
      <a-list :split="false">
        <!-- <a-list-item>
          色弱模式
          <a-switch slot="actions" size="small" />
        </a-list-item>
        <a-list-item>
          显示抽屉按钮
          <a-switch slot="actions" size="small" />
        </a-list-item> -->
        <a-list-item>
          多页签模式
          <a-switch :checked="multipage" slot="actions" size="small" @change="updateMultipage" />
        </a-list-item>
      </a-list>
    </setting-item>
  </a-layout-sider>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, Mutation, namespace } from 'vuex-class'
import SettingItem from './SettingItem.vue'
import StyleItem from './StyleItem.vue'
// @ts-ignore
import { colorList, updateTheme } from './settingConfig'
const setting = namespace('setting')

@Component({
  components: {
    StyleItem,
    SettingItem
  },
})
export default class Setting extends Vue {
  @setting.State('multipage')
  public multipage!: boolean
  @setting.State('theme')
  public theme!: string
  @setting.State('layout')
  public layout!: string
  @setting.State('fixedHeader')
  public fixedHeader!: string
  @setting.State('primaryColor')
  public primaryColor!: string

  @setting.Mutation('setMultipage')
  public setMultipage: any
  @setting.Mutation('setTheme')
  public setTheme: any
  @setting.Mutation('setLayout')
  public setLayout: any
  @setting.Mutation('setFixedHeader')
  public setFixedHeader: any
  @setting.Mutation('ToggleColor')
  public ToggleColor: any

  public colorList = colorList

  // public onColorChange(values: any[], colors: string) {
  //   if (colors.length > 0) {
  //     this.$message.info(`您选择了主题色 ${colors}`)
  //   }
  // }

  public mounted() {
    this.primaryColor && this.changeColor(this.primaryColor, true)
  }

  changeColor (color: string, refresh: boolean = false) {
    if (this.primaryColor !== color || refresh) {
      this.ToggleColor(color)
      updateTheme(color)
    }
  }
  public updateTheme(value: string) {
    this.setTheme(value)
  }
  public updateLayout(value: string) {
    this.setLayout(value)
  }
  public updateMultipage(checked: boolean) {
    this.setMultipage(checked)
  }
  public updateFixedHeader(checked: boolean) {
    this.setFixedHeader(checked)
  }
}
</script>

<style lang="less" scoped>
  .sider{
    background-color: #fff;
    height: 100%;
    padding: 24px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    .flex{
      display: flex;
    }
  }
  .img-check-box {
    display: inline-block;
    margin-right: 16px;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    .check-item {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      padding-top: 15px;
      padding-left: 24px;
      height: 100%;
      color: #1890ff;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .setting-drawer-theme-color-colorBlock {
    display: inline-block;
    width: 16px;
    height: 16px;
  }
</style>
